<template>
  <div class="page">
    <!-- 顶部栏 -->
    <van-nav-bar :border="false">
      <template #left>
        <div class="fz-16 fw-bold">{{ $t('收益明细') }}</div>
      </template>
    </van-nav-bar>

    <div class="container rel pt-0">
      <!-- Tab切换 -->
      <ul class="flex flex-rb flex-wrap mb-15">
        <li
          class="btn click"
          :class="i === tabIndex ? 'active' : ''"
          v-for="(v, i) in tabs"
          :key="i"
          @click="onTabChange(i)"
        >
          {{ v }}
        </li>
      </ul>

      <!-- 股权收益 -->
      <ul>
        <li class="box mt-10" v-for="(v, i) in 5" :key="i">
          <div class="flex flex-wrap rel lh-2">
            <div style="width: 100%">
              <span>{{ $t('类型') }}：</span>
              <span>股权收益</span>
            </div>
            <div style="width: 100%">
              <span>{{ $t('收益额') }}：</span>
              <span>100</span>
            </div>
            <div style="width: 100%">
              <span>{{ $t('期次') }}：</span>
              <span>15</span>
            </div>
            <div style="width: 100%">
              <span>{{ $t('时间') }}：</span>
              <span>2023.1.1</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const tabs = ref([$t('股权收益'), $t('直推收益'), $t('市场收益')])
const tabIndex = ref(0)

function onTabChange(i) {
  tabIndex.value = i
}
</script>

<style lang="scss" scoped></style>
